<template>
  <div class="custom-upload-wrapper flex">
    <div class="ant-upload-list ant-upload-list-picture-card">
      <Draggable
        class="syllable_ul flex"
        tag="ul"
        :list="localImgList"
        :no-transition-on-drag="true"
      >
        <div
          v-for="(img, index) in localImgList"
          :key="index"
          class="ant-upload-list-picture-card-container"
        >
          <span>
            <div
              class="
                ant-upload-list-item
                ant-upload-list-item-done
                ant-upload-list-item-list-type-picture-card
              "
            >
              <div class="ant-upload-list-item-info">
                <span>
                  <a
                    :href="img.url"
                    target="_blank"
                    rel="noopener noreferrer"
                    class="ant-upload-list-item-thumbnail"
                  >
                    <!-- <img :src="img.url" :alt="img.name" class="ant-upload-list-item-image" /> -->
                    <video :src="img.url" :alt="img.name" class="ant-upload-list-item-image" />
                  </a>
                  <a
                    target="_blank"
                    rel="noopener noreferrer"
                    :title="img.name"
                    :href="img.url"
                    class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
                  >
                    {{ img.name }}
                  </a>
                </span>
              </div>
              <span class="ant-upload-list-item-actions">
                <a
                  :href="img.url"
                  target="_blank"
                  rel="noopener noreferrer"
                  title="预览文件"
                  @click.prevent="
                    previewImage = img.url
                    previewVisible = true
                  "
                >
                  <i aria-label="图标: eye-o" class="anticon anticon-eye-o">
                    <svg
                      viewBox="64 64 896 896"
                      data-icon="eye"
                      width="1em"
                      height="1em"
                      fill="currentColor"
                      aria-hidden="true"
                      focusable="false"
                      class=""
                    >
                      <path
                        d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 0 0 0 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"
                      ></path>
                    </svg>
                  </i>
                </a>
                <i
                  aria-label="图标: delete"
                  tabindex="-1"
                  class="anticon anticon-delete"
                  title="删除文件"
                  @click="delImg(index)"
                >
                  <svg
                    viewBox="64 64 896 896"
                    data-icon="delete"
                    width="1em"
                    height="1em"
                    fill="currentColor"
                    aria-hidden="true"
                    focusable="false"
                    class=""
                  >
                    <path
                      d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
                    ></path>
                  </svg>
                </i>
              </span>
              <!---->
            </div>
          </span>
        </div>
      </Draggable>
    </div>
    <a-upload
      list-type="picture-card"
      :file-list="[]"
      :custom-request="customRequest"
      :before-upload="handleBeforeUpload"
    >
      <div v-if="!localImgList || (localImgList && localImgList.length < 8)">
        <a-icon type="cloud-upload" class="text-lg" />
        <div class="ant-upload-text">上传文件</div>
      </div>
    </a-upload>
    <a-modal
      :visible="previewVisible"
      :footer="null"
      class="z-[3000] relative"
      @cancel="handleCancel"
    >
      <!-- <img alt="example" style="width: 100%" :src="previewImage" /> -->
      <video style="width: 100%" :src="previewImage" controls />
    </a-modal>
    <!-- <div class="uc-gray">*格式：png；jpg；不能大于5M</div> -->
  </div>
</template>

<script>
import Draggable from 'vuedraggable'
import { getAuthInfo, uploadToAliOSS } from '@/api/files.ts'
export default {
  components: { Draggable },
  props: {
    imgList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      previewImage: '',
      previewVisible: false,
      // localImgList: [],
    }
  },
  computed: {
    localImgList: {
      get() {
        return this.imgList
      },
      set(val) {
        this.$emit('update:imgList', val)
      },
    },
  },
  methods: {
    handleBeforeUpload(file) {
      console.log('%c [ file ]-154', 'font-size:13px; background:pink; color:#bf2c9f;', file)
      if (file.type !== 'video/mp4') {
        this.$msgbox('请上传mp4文件！', '提示')
        return false
      }
      return true
    },
    async customRequest(obj) {
      const { file } = obj
      const auth = await getAuthInfo({
        bizType: '100001',
        fileOriginalName: file.name,
        isUseOriginalName: 1,
      })

      const { fileId, filePath, host } = auth
      const authInfo = { ...auth, fileId, fileName: file.name }
      const result = await uploadToAliOSS({ ...authInfo, file })
      if (result.data.Status === 'OK') {
        const img = {
          uid: fileId,
          name: file.name,
          status: 'done',
          url: `${host}/${filePath}`,
        }
        if (!this.localImgList) this.localImgList = []
        this.localImgList.push(img)

        this.localImgList = [...this.localImgList]
      }
    },
    delImg(idx) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.localImgList.splice(idx, 1)
        this.localImgList = [...this.localImgList]
      })
    },
    handleCancel() {
      this.previewVisible = false
    },
  },
}
</script>

<style lang="scss" scoped>
.cloud-upload {
  width: 80px;
  height: 80px;
}
</style>
